<template>
    <div class="box">
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="top">
            <img src="../../assets/my.png" alt="">
            <van-form @submit="onSubmit">
                <van-field v-model="username" type="username" name="username" placeholder="请输入账号" :rules="rules.username" />
                <van-field v-model="password" type="password" name="password" placeholder="请输入登录密码" :rules="rules.password" />
                <div style="margin: 16px;">
                    <van-button size="middle" block type="info" native-type="submit" color="linear-gradient(to right, #ff9000, #ff5000)">登录</van-button>
                </div>
                <div class="toregister">
                    <router-link to='./register'>没有账号？立即注册</router-link>
                </div>
            </van-form>
        </div>

        <div class="bottom">
            <van-divider>其他方式</van-divider>
            <div class="icon">
                <van-icon @click="show = true" class="wechat" name="wechat" size="50" color="green" />
                <van-icon @click="show1 = true" class="alipay" name="alipay" size="50" color="#1989fa" />
            </div>
        </div>
        <van-overlay :show="show" @click="show = false" class="overlay">
            <img src="../../assets/wechat.png" alt="">
        </van-overlay>
        <van-overlay :show="show1" @click="show1 = false" class="overlay">
            <img src="../../assets/alipay.png" alt="">
        </van-overlay>

    </div>

</template>

<script>
import Vue from "vue";
import { Form } from "vant";
import { Field } from "vant";
import { Toast } from "vant";
import { Icon } from "vant";
import { Divider } from "vant";
import { Overlay } from "vant";
import { Notify } from "vant";
import { NavBar } from "vant";
import { setCookie } from "@/utils/cookie";
import { login } from "@/request";

Vue.use(NavBar);
Vue.use(Notify);
Vue.use(Overlay);
Vue.use(Divider);
Vue.use(Icon);
Vue.use(Toast);
Vue.use(Form);
Vue.use(Field);

export default {
    data() {
        return {
            rules: {
                username: [
                    {
                        required: true,
                        message: "请填写用户名",
                        trigger: "onChange",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请填写密码",
                        trigger: "onChange",
                    },
                ],
            },
            username: "",
            password: "",
            show: false,
            show1: false,
        };
    },
    mounted() {
        Notify({
            message: "你必须登录以后才能继续查看",
            color: "#fff",
            background: "linear-gradient(to right, #ff9000, #ff5000)",
        });
    },
    methods: {
        onSubmit(values) {
            var _this = this;
            login(values).then((data) => {
                var { code, msg } = data;
                if (code === 1) {
                    // 成功
                    Toast.success({
                        message: msg,
                        onClose() {
                            //存储cookie
                            setCookie("username", values.username, 7200);
                            setCookie("nickname", data.data.nickname, 7200);
                            // 跳转
                            var url = localStorage.getItem("url");
                            if (url) {
                                localStorage.removeItem("url");
                                _this.$router.push(url);
                            } else {
                                _this.$router.push("/my");
                            }
                        },
                    });
                } else {
                    // 失败
                    Toast.fail(msg);
                }
            });
        },
        onClickLeft() {
            this.$router.push("/my");
        },
    },
};
</script>

<style scoped>
.box {
    border-radius: 10px;
    min-height: 100vh;
    width: 100%;
    /* background-color: skyblue; */
}

.van-cell {
    padding: 15px 40px;
    position: relative;
    font-size: 16px;
}

.toregister {
    float: right;
    /* margin-right: 20px; */
    margin: 10px 18px;
    font-size: 16px;
}

.toregister a {
    color: #969799;
}

.top img {
    box-shadow: 0 2px 4px #867f71;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.top {
    text-align: center;
}

.van-button {
    font-size: 16px;
    box-shadow: 0 2px 4px #f7c7b1;
    border-radius: 35px;
    height: 45px;
}

.van-cell {
    margin: 0 auto;
}

.van-cell[data-v-4db05080] {
    width: 90%;
    /* border-radius: 50px; */
    margin-bottom: 25px;
}

.bottom {
    margin-top: 80px;
    position: relative;
}

.icon {
    text-align: center;
    width: 100%;
    /* background-color: black; */
    position: absolute;
    /* transform: translateX(50%); */
}

.wechat {
    border-radius: 10px;
    box-shadow: 0 2px 4px #ccc8e0;
    margin-right: 20px;
}

.alipay {
    box-shadow: 0 2px 4px #ccc8e0;
    border-radius: 10px;
    margin-left: 20px;
}

.overlay {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay img {
    height: 200px;
    width: 200px;
}
</style>